<template>
    <view class="invite-pay">
        <view class="pay-list">
            <view class="pay-title">请选择支付方式</view>
            <view class="flex-s-c pay-li" v-for="(item, index) in paylist" :key="index"
                @click="paychange(item.PaymentPayWay)">
                <view class="flex-s-c">
                    <image class="pay-img" :src="getPayTypeIcon(item)"></image>
                    <text class="pay-text">{{ item.PaymentPayWay == 12 ? "银联支付" : item.PayName }}
                        <text v-if="[2, 9].indexOf(item.PayType) > -1" class="balance">(余额￥{{ item.Balance
                        }})</text></text>
                </view>
                <uni-icons class="icon-select" :type="payWay == item.PaymentPayWay ? 'circle-filled' : 'circle'"
                    size="44" :customIcons="payWay == item.PaymentPayWay ? 'icon-color-main' : ''"></uni-icons>
            </view>

            <view v-if="offlinePay">
                <view class="flex-s-c pay-li">
                    <view class="flex-s-c">
                        <image class="pay-img" :src="getPayTypeIcon(offlinePay)"></image>
                        <text class="pay-text">{{ offlinePay.PayName }}</text>
                    </view>
                </view>
                <view class="flex-s-c pay-li offline-pay-item" v-for="(item, index) in bankList" :key="index"
                    @click="selectOfflineAccount(item)">
                    <view class="flex-s-c">
                        <image class="pay-img" :src="getOfflinePayTypeIcon(item.AccountType)"></image>
                        <text class="pay-text">{{ item.CustomName ? item.CustomName : item.AccountTypeName }}</text>
                    </view>
                    <uni-icons class="icon-select"
                        :type="useOfflineAccount && useOfflineAccount.ID == item.ID ? 'circle-filled' : 'circle'"
                        size="44" :customIcons="useOfflineAccount && useOfflineAccount.ID == item.ID ? 'icon-color-main' : ''
                            "></uni-icons>
                </view>
                <!-- 		<view class="flex-s-c pay-li" @click="goMini()">
				    <view class="flex-s-c">
				        <text class="pay-text">微信支付</text>
				    </view>
				</view> -->
            </view>
        </view>
        <button class="btn btn-main" @click="openSharePopup">确认支付</button>
        <uni-popup ref="popInvitePay" type="share">
            <easy-share @select="select"></easy-share>
        </uni-popup>

        <uni-popup ref="qcodePopup" type="right">
            <qcode @onBack="onBack" :qcode="qcode"></qcode>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import uniCopy from "@/uni-sub-base/plugins/uni-copy.js"
import easyShare from "@/components/easy/easy-share.vue"
import qcode from "@/components/order/qcode.vue"
import uniShare from "@/uni_modules/uni-share/js_sdk/uni-share.js"
import config from "@/config/config.js"
import storage from "@/uni-sub-base/utils/storage.js"
import { postPayWay, getPayType } from "@/config/type.js"
import { SharePayOrder, GetPayOrderId, XianPay } from "@/service/api/order.js"
import configs from "@/config/config.js"
import { GetMiniAppPayData } from "@/service/api/weChatGuide.js"
export default {
    components: {
        easyShare,
        qcode,
    },
    props: {
        height: {
            type: String,
            default: "300px",
        },
        data: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {
            initData: [
                {
                    PayName: "线下支付",
                    PayImg: require("@/static/img/bank/unionPay.png"),
                },
                {
                    PayName: "余额支付",
                    PayImg: require("@/static/img/bank/unionPay.png"),
                },
                {
                    PayName: "银联支付",
                    PayImg: require("@/static/img/bank/unionPay.png"),
                    payWay: 12,
                },
                // {
                // 	PayName:"富友支付",
                // 	PayImg: require("@/static/img/bank/fuyouPay.png")
                // }
            ],
            activeIndex: 0,
            qcode: "",
            payLink: "",
            payWay: -1,
            paylist: [],
            bankList: [],
            offlinePay: null,
            useOfflineAccount: null,
            Balance: 0,
        }
    },
    mounted() {
        this.getOrderDetail()
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        goMini() {
            let BusinessId = storage.getCache("businessID")
            let path =
                "pages_shop/packet/order/appGoMiniwaitPay?orderId=" +
                this.data.ID +
                "&formapp=1&businessId=" +
                BusinessId +
                "&payWay=4"
            console.log(path)
            this.openMiniProgram(path, 'gh_18f02350200e', null, 2)
        },
        selectOfflineAccount(item) {
            if (this.offlinePay) {
                if (this.useOfflineAccount && this.useOfflineAccount.ID == item.ID) {
                    this.useOfflineAccount = null
                    this.paychange(this.offlinePay.PaymentPayWay)
                } else {
                    this.useOfflineAccount = item
                    this.paychange(this.offlinePay.PaymentPayWay)
                }
            }
        },
        getPayTypeIcon(item) {
            let type = item.PaymentPayWay
            return this.getPayIcon(type)
        },
        paychange(id, num) {
            if (this.payWay != id) {
                this.payWay = id
            } else {
                this.payWay = -1
            }
            if (id != 0) {
                this.useOfflineAccount = null
                this.$forceUpdate()
            }
            if (this.useOfflineAccount) {
                this.payWay = id
            }
        },
        choose(item, index) {
            this.activeIndex = index
            this.payWay = item.payWay
        },
        //获取订单详情
        getOrderDetail() {
            let path = "?id=" + this.data.OrderId + "&isXianXia=1"
            GetPayOrderId(path).then((res) => {
                console.log(res)
                if (res.State) {
                    this.bankList = res.Data.BankList
                    let paylist = res.Data.PayList
                    paylist.forEach((e, index) => {
                        if (e.PaymentPayWay == 12) {
                            this.paylist.push(e)
                        }
                        if (e.PaymentPayWay == 1) {
                            this.Balance = e.Balance
                            this.paylist.push(e)
                        }
                        if (e.PaymentPayWay == 13) {
                            this.paylist.push(e)
                        }
                    })
                    paylist.forEach((e, index) => {
                        //线下支付
                        if (e.PaymentPayWay == 0) {
                            this.offlinePay = e
                        }
                    })
                    this.payWay = this.paylist[0].PaymentPayWay
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        openSharePopup() {
            if (this.payWay < 0) {
                this.easyToast("请选择支付方式")
                return false
            }
            if (this.payWay == 12) {
                this.sharePayOrder(this.data.OrderId, this.payWay)
            } else if (this.payWay == 1) {
                //余额支付
                if (Number(this.Balance) >= Number(this.data.PayMoney)) {
                    let parms = {
                        orderId: this.data.OrderId,
                        payWay: 1,
                        price: this.data.PayMoney,
                    }
                    XianPay(parms).then((res) => {
                        if (res.State) {
                            this.easyToast("支付成功")
                            this.upOrderView()
                            setTimeout((e) => {
                                this.easyGoHome()
                            }, 1000)
                        } else {
                            this.easyToast(res.Msg)
                        }
                    })
                } else {
                    this.easyToast("余额不足")
                }
                console.log(this.Balance)
            } else if (this.payWay == 0) {
                //线下支付
                this.easyGoTo(
                    "/pages_shop/packet/return/waitPay?paynumber=" +
                    this.data.PayMoney +
                    "&orderId=" +
                    this.data.OrderId +
                    "&accountId=" +
                    this.useOfflineAccount.ID +
                    "&from=1",
                )
            } else if (this.payWay == 13) {
                let BusinessId = storage.getCache("businessID")
                let notify_url = configs.baseUrl + "Notify/OrderPay/" + BusinessId
                let tip = "订单支付"
                let payParam = {
                    tip: tip,
                    orderSn: this.data.Sn,
                    paySn: this.data.OutTradeNo,
                    money: this.data.PayMoney,
                    notifyUrl: notify_url,
                    payWay: this.payWay,
                    businessId: BusinessId,
                }
                GetMiniAppPayData(payParam).then((res) => {
                    uni.hideLoading()
                    if (res.State == 1) {
                        if (res.Data.status) {
                            this.qcode = res.Data.url
                            this.$refs.qcodePopup.open()
                        } else {
                            this.easyToast(res.Data.Msg)
                        }
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else {
                this.$refs.popInvitePay.open()
            }
        },
        //更新列表
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
        select(e) {
            console.log(e)
            const that = this
            let businessDomain = storage.getCache("businessDomain")
            let url = businessDomain + "/m/user/orderdetail?id=" + this.data.OrderId
            if (e.item.name == "wx") {
                let shareImg = "/static/logo.png"
                let shareImages = ""
                //#ifdef APP
                shareImages = "file://" + plus.io.convertLocalFileSystemURL(shareImg)
                //#endif
                uni.share({
                    provider: "weixin",
                    scene: "WXSceneSession",
                    imageUrl: shareImages,
                    type: 0,
                    href: url,
                    title: "订单详情",
                    summary: "待支付订单",
                    success: function (res) {
                        console.log("success:" + JSON.stringify(res))
                    },
                    fail: function (err) {
                        console.log("fail:" + JSON.stringify(err))
                    },
                })
            } else if (e.item.name == "face") {
                //面对面支付
                that.$refs.qcodePopup.open()
            } else if (e.item.name == "link") {
                that.copyShareText(url)
            }
        },
        onBack() {
            this.$refs.qcodePopup.close()
        },
        copyShareText(url) {
            let text = `订单详情：${url}`

            uniCopy({
                content: text,
                success: (res) => {
                    uni.showToast({
                        title: res,
                        icon: "none",
                    })
                },
                error: (e) => {
                    uni.showToast({
                        title: e,
                        icon: "none",
                        duration: 3000,
                    })
                },
            })
        },
        invitePay() {
            var that = this
            uniShare(
                {
                    content: {
                        //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
                        type: 0,
                        href: "https://lf949.hsy884.com/m/user/sharecenternew?invit_user_id=pAo6olrMvp4=",
                        title: "1111",
                        summary: "",
                        imageUrl: "",
                    },
                    menus: [
                        {
                            img: "/static/app-plus/sharemenu/wechatfriend.png",
                            text: "微信好友",
                            share: {
                                //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
                                provider: "weixin",
                                scene: "WXSceneSession",
                            },
                        },
                        {
                            img: "/static/app-plus/sharemenu/car.png",
                            text: "车主端",
                            share: "car",
                        },
                    ],
                    cancelText: "取消分享",
                },
                (e) => {
                    //callback
                    MomentAddShare({
                        id: that.data[0].ID,
                    }).then((res) => {
                        if (res.State) {
                            that.data[0].ShareCount++
                            that.UP_VEDIO_VIEW(new Date().getTime())
                        }
                    })
                },
                (index) => {
                    if (index == 1) {
                        MomentForward({
                            id: that.data[0].ID,
                        }).then((res) => {
                            if (res.State == 1) {
                                uni.showToast({
                                    icon: "none",
                                    title: "分享成功",
                                    duration: 1000,
                                })
                                MomentAddShare({
                                    id: that.data[0].ID,
                                }).then((res) => {
                                    if (res.State) {
                                        that.data[0].ShareCount++
                                        that.UP_VEDIO_VIEW(new Date().getTime())
                                    }
                                })
                            }
                        })
                    }
                },
            )
        },
        //分享支付订单
        sharePayOrder(orderId, payway) {
            uni.showLoading({
                title: "加载中",
            })
            SharePayOrder(orderId, payway).then((res) => {
                uni.hideLoading()
                if (res.State == 1) {
                    this.qcode = "data:image/png;base64," + res.Data.QrCode
                    this.payLink = res.Data.PayLink
                    this.$refs.popInvitePay.open()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.invite-pay {
    margin: $app-page-padding;
    background: $color-white;
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;

    .pay-list {
        .pay-title {
            color: #1e1e1e;
            font-size: 32rpx;
            padding: 26rpx 34rpx;
            background: linear-gradient(270deg, #fffbfb 0%, #fff3f3 100%);
        }

        .pay-li {
            height: 112rpx;
            padding: 0 24rpx;

            .pay-img {
                height: 48rpx;
                width: 48rpx;
                margin-right: 12rpx;
            }

            .pay-text {
                color: #1e1e1e;
                font-size: 28rpx;
            }

            .icon-select {}

            .pay-select {
                width: 40rpx;
                height: 40rpx;
                border-radius: 20rpx;
                border: 2rpx solid rgba(0, 0, 0, 0.3);
            }

            .pay-select-active {
                border-color: $app-color-main;
                position: relative;

                &:after {
                    content: "";
                    position: absolute;
                    left: 10rpx;
                    top: 10rpx;
                    width: 20rpx;
                    height: 20rpx;
                    border-radius: 10rpx;
                    background: $app-color-main;
                }
            }
        }
    }

    .btn {
        position: relative;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        // width: calc(100% - 64rpx);
        margin: 24rpx 32rpx 32rpx;
    }
}

.offline-pay-item {
    padding-left: 52rpx !important;
}
</style>
